import React, { useEffect, useState } from "react";
import Top from "./components/top"
import "./index.css"
import Action from "./components/action"
import Btn from "./components/btn"
import { Tabs } from 'react-vant'
import { withRouter } from "react-router-dom";
import { getCouponsApi } from "../../api/coupons";
import { getUtypeApi } from '../../api/point'
import { getUserInfo,editUser } from "../../api/userinfo";
const Car = (props) => {
    const [initUser,setInitUser] = useState('')
    const [user, setUser] = useState([])
    const [coupons, setCoupons] = useState([])
    const [utype, setUtype] = useState([])
    const couponsList = async () => {
        let res = await getCouponsApi()
        setCoupons(res)
    }
    const utypeList = async () => {
        let res = await getUtypeApi()
        setUtype(res)
    }
    const userList = async () => {
        let res = await editUser()
        setUser(res)
    }
    const getUser =async ()=>{
        let res = await getUserInfo({ phone: '18234824645' })
        setInitUser(res)
    }
    useEffect(() => {
        getUser()
        utypeList()
        couponsList()
        userList()
    }, [coupons])

    return (
        <div className='demo-tabs'>
            <Top title='我的优惠券'></Top>
            <Tabs active='c'>
                {utype.map((item) => (
                    <Tabs.TabPane key={item.utid} title={item.type}>
                        <div className="zeng">
                            <span>您的优惠券可用批量赠送好友啦~</span>
                        </div>
                        <div className="hui">
                            <ul>
                                {
                                    coupons.filter(it => item.type === it.type &&it.uid === initUser[0].uid).map(i => <li key={i.id}>
                                        <div className="zuo">{i.coid}</div>
                                        <div className="yo">
                                            <div className="op">
                                                <span>{i.coupons}</span>
                                                <span>{i.type}</span>
                                                <p>2023.02.17-2023.03.19</p>
                                            </div>
                                            <div className="om">
                                                <Action></Action>
                                                {i.type == '可使用券' ? <button className="tn" onClick={() => { props.history.push({ pathname: "/Layout/Hotpoint" }) }}>去使用</button> : ''}
                                            </div>
                                        </div>
                                    </li>)
                                }
                            </ul>
                            <div className="zhan">
                                <span>仅展示近1个月的消费记录</span>
                            </div>
                        </div>
                    </Tabs.TabPane>
                ))}
            </Tabs>
            <Btn></Btn>
        </div>
    )
}
export default withRouter(Car)